// 封装获取id元素函数
function $(id) {
    return document.getElementById(id);
};

// 封装清空旧数据的函数
function cleanDom() {
    $("main").innerHTML = `
  <h2>
  <strong>Person</strong>
  <span>Wealth</span>
  </h2> 
  `;

    // 打开状态
    flag = true;
};

// 存当前操作的数据
let nowData = [];
// 初始值
let index = 0;
// 设置开关(用于显示总金额)
let flag = true;


// 给按钮添加点击事件
$("toggle").addEventListener("click", function () {
    // 给body添加显示导航类名
    document.body.classList.toggle("show_nav");
});


// 添加账户
$("add-user").addEventListener("click", function () {
    // 判断是否到达最大值
    if (index >= dataInfo.length) return;

    // 每次添加的数据全部放进nowData数组中保存
    nowData.push(dataInfo[index]);

    // 渲染页面
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>${dataInfo[index].name}</strong>
    <span>$ ${(dataInfo[index].money).toLocaleString()}</span>
  `;
    // 判断是否出现总金额
    if (flag) {
        $("main").appendChild(newH2);
    } else {
        // ????
        // 添加节点到总金额元素的前面
        $("main").insertBefore(newH2, $("main").lastElementChild)
    }


    // 自增放后面
    index++;
});


// 资金翻倍
$("double").addEventListener("click", function () {
    // 清空旧数据
    cleanDom();

    nowData.forEach(function (item) {
        // 数据翻倍 (需要重新赋值,改变原数据)
        item.money = item.money * 2;
        // 渲染页面
        let newH2 = document.createElement("h2");
        // `` 模版字符串 es6新语法
        newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
        $("main").appendChild(newH2);
    });
});

// 查询百万富翁
$("show-millionaire").addEventListener("click", function () {
    // 清空旧数据
    cleanDom();

    // 过滤nowData数据, 是否存在1000000
    nowData = nowData.filter(function (item) {
        return item.money >= 1000000;
    });

    nowData.forEach(function (item) {
        // 渲染页面
        let newH2 = document.createElement("h2");
        // `` 模版字符串 es6新语法
        newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
        $("main").appendChild(newH2);
    });
});


// 财富榜
$("sort").addEventListener("click", function () {
    // 清空旧数据
    cleanDom();

    // 对nowData数据的money进行排序 (从大到小排序)
    nowData.sort(function (a, b) {
        return b.money - a.money;
    });

    nowData.forEach(function (item) {
        // 渲染页面
        let newH2 = document.createElement("h2");
        // `` 模版字符串 es6新语法
        newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
        $("main").appendChild(newH2);
    });
});


// 计算总额
$("calculate").addEventListener("click", function () {
    let sum = 0;
    // 累加
    sum = nowData.reduce(function (total, current, currentIndex, arr) {
        return total += current.money;
    }, 0);

    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>总金额</strong>
    <span>$ ${(sum).toLocaleString()}</span>
    `;

    // 判断是否可以继续显示总金额
    if (flag) {
        $("main").appendChild(newH2);
        // 关闭状态
        flag = false;
    };

});